


<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-header h3 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #083a6d;
}

.el-pagination {
  margin-top: 20px;
  justify-content: center;
}
:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active){
  background-color: #083a6d;
}
/*自定义弹出框头部样式*/
.my-header {
  display: flex;
  justify-content: flex-start;
  color: #083a6d;
}
.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 18px;
}
.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 6px;
}
.demo-progress .el-progress--line {
  margin-bottom: 15px;
  max-width: 600px;
}
.demo-progress .el-progress--circle {
  margin-right: 15px;
}

</style>


<template>
  <el-card>
    <!--头部区域 start-->
    <template #header>
      <div class="card-header">
        <h3>
          <el-icon style="margin-right: 10px;"><Avatar /></el-icon>
          用户学习时长管理
        </h3>

        <!--搜索区域 start-->
        <div class="card-search">
          <el-row :gutter="10">
            <div style="display: flex">
              <el-input :prefix-icon="Search" v-model="searchValue" @keyup.enter.native="search" placeholder="关键字搜索（回车）"/>



              <el-col :span="3" style="display: inline-flex;justify-content: center;align-items:center;cursor: pointer;">
                <el-icon style="font-size:20px;color: #b3b6bc;" @click="postQueryStudyAllFun"><Refresh /></el-icon>
              </el-col>
            </div>


          </el-row>
        </div>
        <!--搜索区域 end-->
      </div>
    </template>
    <!--头部区域 end-->
    <!--表格区域 start-->
    <div class="table-box">
      <el-table
          stripe
          element-loading-text="数据加载中..."
          v-loading="data.loading"
          :data="data.list.content"
          style="width: 100%;text-align: center;"
          :cell-style="{ textAlign: 'center'}"
          :header-cell-style="{
              fontSize: '15px',
              background: '#083a6d',
              color: 'white',
              textAlign: 'center'
            }">

        <el-table-column label="序号" width="80" type="index" />

        <el-table-column label="用户名">
          <template #default="scope">
            <span>{{scope.row.user.nickname}}</span>
          </template>
        </el-table-column>

        <el-table-column label="姓名">
          <template #default="scope">
            <span>{{scope.row.realName}}</span>
          </template>
        </el-table-column>

        <el-table-column label="手机号" width="120">
          <template #default="scope">
            <span>{{scope.row.user.phone}}</span>
          </template>
        </el-table-column>



        <el-table-column label="报名课程" width="120">
          <template #default="scope">
            <span>{{dictStatus(data.dict2,scope.row.courseId)}}</span>
          </template>
        </el-table-column>

        <el-table-column label="观看进度" width="200">
          <template #default="scope">
            <el-progress type="dashboard" :width="80" :percentage="scope.row.speed">
              <template #default="{ scope2 }">
                <span class="percentage-value">{{ scope.row.speed }}%</span>
                <span class="percentage-label">Progressing</span>
              </template>
            </el-progress>
          </template>
        </el-table-column>



        <el-table-column label="观看时长" width="200">
          <template #default="scope">
            <span>{{(scope.row.visitLong / 60).toFixed(2)}} min </span>
          </template>
        </el-table-column>

        <el-table-column label="总时长" width="180">
          <template #default="scope">
            <span>{{(scope.row.totalLong / 60).toFixed(2)}} min</span>
          </template>
        </el-table-column>



        <el-table-column label="创建时间" width="140">
          <template #default="scope">
            <span>{{formatTime(scope.row.createTime,'yyyy-MM-dd')}}</span>
          </template>
        </el-table-column>

        <el-table-column label="最近观看时间" width="140">
          <template #default="scope">
            <span>{{formatTime(scope.row.updateTime,'yyyy-MM-dd')}}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" fixed="right" width="80">
          <template #default="scope">
            <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" :icon="Delete"
                           icon-color="#626AEF" :title="'确定要删除名为“'+scope.row.realName+'”的报名吗？'"
                           @confirm="delMember(scope.row.id)">
              <template #reference>
                <el-button type="danger" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <!--表格区域 end-->
    <!--分页插件 start-->
    <el-pagination background layout="total,sizes,prev,pager,next,jumper"
                   :total="data.total"
                   v-model:page-size="data.pageSize"
                   :page-sizes="[10,20,30,40]"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
    />


  </el-card>



</template>

<script setup lang="ts">
import {ref, reactive, toRefs, onMounted, watch} from 'vue'
import {formatTime} from "@/utils/date"
import {exportExcel} from "@/utils/exportExcel";
import {postDeleteEntry, postQueryEntryAll, postUpdateEntry} from "@/api/edu/entryApi";
import {Delete, Search} from "@element-plus/icons-vue";
import search from "@/views/edu/comm/Search.vue";
import {dictStatus, msg} from "@/config/Tool";
import {getQueryLesson, postQueryStatus} from "@/api/edu/dictApi";
import {visitPath} from "@/api/edu/fileApi";
import EntryDialog from "@/components/entryDialog.vue";
import {postDeleteStudy, postQueryStudyAll} from "@/api/edu/studyApi";
// 服务器路径
const url = import.meta.env.VITE_APP_BASE_API
const state = ref({
  // 搜索关键字
  searchValue: '',
  // 表格数据
  tableData: [],
  // 总条数
  total: 0,
  // 每页显示行数
  pageSize: 10,
  // 当前页码
  pageIndex: 0,
  // 数据加载状态
  loading: false
})
const data = ref({
  list:{content:[]},
  list2:{content:[]},
  sexList:"",
  loading:true,
  dict2:[],
  dict3:[],
  dict4:[],
  dict5:[],
  dict6:[],
  dict7:[],
  // 搜索关键字
  searchValue: '',
  // 总条数
  total: 0,
  // 每页显示行数
  pageSize: 10,
  // 当前页码
  pageIndex: 0,


})
const itemInfo =ref({});
const entryDialogShow = ref(false);
const searchValue = ref();//搜索
const lessonDict = ref([]);


watch(searchValue,(newValue, oldValue, onCleanup)=>{
  if (newValue.length>=1){
    const arr = data.value.list2.content;
    // @ts-ignore
    let content = []
    arr.map((item:object)=>{
      // @ts-ignore
      if (item.realName.includes(newValue)){

        content.push(item)
        // @ts-ignore
      }else if(item.user.phone.includes(newValue)){
        content.push(item)
        // @ts-ignore
      }else if(item.user.nickname.includes(newValue)){
        content.push(item)
        // @ts-ignore
      }else if(item.updateTime.includes(newValue)){
        content.push(item)
        // @ts-ignore
      }else if(item.createTime.includes(newValue)){
        content.push(item)
      }
    })
    // @ts-ignore
    data.value.list.content=content
  }else {
    postQueryEntryAll({
      page:data.value.pageIndex,
      limit:data.value.pageSize
    }).then(res=>{
      if (res.code==200){
        data.value.list=res.data;
        data.value.list2=res.data;
        data.value.total=res.data.totalPages;
        data.value.pageSize = res.data.size;
      }
    })
  }
})
onMounted(()=>{
  postQueryStatusFun([2,3,4,5,6,7])
  postQueryStudyAllFun();
})

const handleCurrentChange = (val:number)=> {
  data.value.pageIndex=val-1;
  postQueryStudyAllFun();
}
const handleSizeChange = (val:number)=> {
  data.value.pageSize=val;
  postQueryStudyAllFun();
}

// 删除
const delMember = async (id: number)=> {
  postDeleteStudy({id:id}).then((res)=>{
    msg(res,"");
    postQueryStudyAllFun();
  })
}






/**
 * 查询用户报名信息
 */
function postQueryStudyAllFun(){
  data.value.loading = true;
  postQueryStudyAll({
    page:data.value.pageIndex,
    limit:data.value.pageSize
  }).then(res=>{
    if (res.code==200){
      data.value.list=res.data;
      data.value.list2=res.data;
      data.value.total=res.data.totalPages;
      data.value.pageSize = res.data.size;
    }
    data.value.loading = false;
  })
}

/**\
 * 查询字典状态
 */
function postQueryStatusFun(e:any){
  e.forEach((item:any)=>{
    postQueryStatus({type:item}).then((res)=>{
      switch (item){
        case 2:
          data.value.dict2=res.data;
          break;
        case 3:
          data.value.dict3=res.data;
          break;
        case 4:
          data.value.dict4=res.data;
          break;
        case 5:
          data.value.dict5=res.data;
          break;
        case 6:
          data.value.dict6=res.data;
          break;
        case 7:
          data.value.dict7=res.data;
          break;
        default:
          break;

      }
    })
  })
  getQueryLesson().then(res=>{
    lessonDict.value=res.data;
  })
}



/**
 * 展开组件
 */
function shengheFun(e:object,status:String){
  if (status==='1'){
    // @ts-ignore
    e.status='2';
    postUpdateEntry(e);
  }
  itemInfo.value = e;
  entryDialogShow.value = true;
}

</script>


